{% include "iframe_header" %}

<style>
    .welcome .layui-card {border:1px solid #f2f2f2;border-radius:5px;}
    .welcome .icon {margin-right:10px;color:#1aa094;}
    .welcome .icon-cray {color:#ffb800 !important;}
    .welcome .icon-blue {color:#1e9fff !important;}
    .welcome .icon-tip {color:#ff5722 !important;}
    .green {color: green;}
    .red {color:red;}
    .welcome .layuimini-qiuck-module {text-align:center;margin-top:10px}
    .welcome .layuimini-qiuck-module a i {display:inline-block;width:100%;height:60px;line-height:60px;text-align:center;border-radius:2px;font-size:30px;background-color:#F8F8F8;color:#333;transition:all .3s;-webkit-transition:all .3s;}
    .welcome .layuimini-qiuck-module a cite {position:relative;top:2px;display:block;color:#666;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-size:14px;}
    .welcome .welcome-module {width:100%;height:210px;}
    .welcome .panel {background-color:#fff;border:1px solid transparent;border-radius:3px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.05);box-shadow:0 1px 1px rgba(0,0,0,.05)}
    .welcome .panel-body {padding:10px}
    .welcome .panel-title {margin-top:0;margin-bottom:0;font-size:12px;color:inherit}
    .welcome .label {display:inline;padding:.2em .6em .3em;font-size:75%;font-weight:700;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25em;margin-top:.3em;}
    .welcome .layui-red {color:red}
    .welcome .main_btn > p {height:40px;}
    .welcome .layui-bg-number {background-color:#F8F8F8;}
    .welcome .layuimini-notice:hover {background:#f6f6f6;}
    .welcome .layuimini-notice {padding:7px 16px;clear:both;font-size:12px !important;cursor:pointer;position:relative;transition:background 0.2s ease-in-out;}
    .welcome .layuimini-notice-title,.layuimini-notice-label {padding-right:70px !important;text-overflow:ellipsis !important;overflow:hidden !important;white-space:nowrap !important;}
    .welcome .layuimini-notice-title {line-height:28px;font-size:14px;}
    .welcome .layuimini-notice-extra {position:absolute;top:50%;margin-top:-8px;right:16px;display:inline-block;height:16px;color:#999;}
</style>
<div class="layuimini-container layui-anim layui-anim-upbit">
    <div class="layuimini-main welcome">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md8">
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md12">
                        <div class="layui-card">
                            <div class="layui-card-header"><i class="fa fa-warning icon"></i>数据统计</div>
                            <div class="layui-card-body">
                                <div class="welcome-module">
                                    <div class="layui-row layui-col-space10">
                                        <div class="layui-col-xs6">
                                            <div class="panel layui-bg-number">
                                                <div class="panel-body">
                                                    <div class="panel-title">
                                                        <span class="label pull-right layui-bg-blue">实时</span>
                                                        <h5>资产对账</h5>
                                                    </div>
                                                    <div class="panel-content">
                                                        <h1 class="no-margins assets_global" style="font-size: 12px;">0</h1>
                                                        <small class="assets_health"> - </small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- <div class="layui-col-xs6">
                                            <div class="panel layui-bg-number">
                                                <div class="panel-body">
                                                    <div class="panel-title">
                                                        <span class="label pull-right layui-bg-cyan">实时</span>
                                                        <h5>今日成交</h5>
                                                    </div>
                                                    <div class="panel-content">
                                                        <h1 class="no-margins" style="font-size: 12px;">[USDJPY]成交量: 0 - 成交金额: 0.00</h1>
                                                    </div>
                                                </div>
                                            </div>
                                        </div> -->
                                        
                                    </div>

                                    <div class="layui-row layui-col-space10">
                                        
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6"></div>
                    
                </div>

                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md12">
                        <div class="layui-card">
                            <div class="layui-card-header"><i class="fa fa-warning icon"></i>实时交易统计(来自缓存)</div>
                            <div class="layui-card-body">
                                <table class="layui-hide" id="all-symbols-stats" lay-filter="symbolsStatsFilter"></table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>



            <div class="layui-col-md4">

                <div class="layui-card">
                    <div class="layui-card-header"><i class="fa fa-fire icon"></i>系统信息</div>
                    <div class="layui-card-body layui-text">
                        <table class="layui-table">
                            <colgroup>
                                <col width="100">
                                <col>
                            </colgroup>
                            <tbody>
                            <tr>
                                <td>名称</td>
                                <td>
                                    HaoTrader交易系统
                                </td>
                            </tr>
                            <tr>
                                <td>当前版本</td>
                                <td class="version">v1.0.4</td>
                            </tr>
                            <tr>
                                <td>运行状态</td>
                                <script id="sys-status-tpl" type="text/html">
                                    <ul style="font-size: 12px; padding: unset;">
                                    {{#  layui.each(d, function(module_name, nodes){ }}
                                        <li style="list-style-type:none;"> {{ module_name }} ... {{# if(nodes.length > 0){ }}<i class="green fa fa-check"></i>{{# }else{ }}<i class="red fa fa-close"></i>{{# } }}
                                            <ul style="margin-left: 10px;">
                                                {{# layui.each(nodes, function(index,  node){ }}
                                                <li><span class="tips" tips="Hostname">{{ node.hostname }}</span> - <span class="tips" tips="Pid">{{ node.pid }}</span> - <span>{{ node.version }}</span></li>
                                                {{#  }); }}
                                            </ul>
                                        </li>
                                    {{#  }); }}
                                    </ul>
                                </script>
                                <td class="sys-status"></td>
                            </tr>
                            
                            
                            
                            <tr>
                                <td>Github</td>
                                <td style="padding-bottom: 0;">
                                    <div class="layui-btn-container">
                                        <iframe src="https://ghbtns.com/github-btn.html?user=yzimhao&repo=trading_engine&type=star&count=true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
                                        <iframe src="https://ghbtns.com/github-btn.html?user=yzimhao&repo=trading_engine&type=fork&count=true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
                                    </div>
                                </td>
                            </tr>

                            <tr>
                                <td>第三方库</td>
                                <td>
                                    <ul>
                                        <li><a href="https://github.com/zhongshaofa/layuimini" target="_blank">layuimini-2.0.6.1</a></li>
                                    </ul>
                                </td>
                            </tr>

                            </tbody>
                        </table>
                    </div>
                </div>

                

            </div>
        </div>
    </div>
</div>
<script>
    layui.use(['layer', 'table'], function () {
        var $ = layui.jquery,
            layer = layui.layer,
            laytpl = layui.laytpl,
            table = layui.table;

        $(document).on("mouseover", ".sys-status .tips", function(){
            layer.tips($(this).attr("tips"), this, {
                tips: 1
            });
        });

        var loadSystemInfo = function() {
            $.ajax({
                url: "/api/v1/admin/system/info",
                success:function(d){
                    if(d.ok){
                        $(".version").html(d.data["version"] +"/" +d.data["build_at"]);


                        var module = d.data['module'];
                        var sys_status_tpl = $("#sys-status-tpl").html();
                        
                        laytpl(sys_status_tpl).render(module, function (html) {
                            $(".sys-status").html(html);
                        });
                        
                        
                        $(".assets_global").html(d.data["assets_stats"]["user_total"]);
                        if (d.data["assets_stats"]["health"]){
                            $(".assets_health").html("正常").addClass("green");
                        }else{
                            $(".assets_health").html("异常").addClass("red");
                        }
                    }
                }
            })
        };

        loadSystemInfo();
        

        
        table.render({
            elem: '#all-symbols-stats',
            url: '/api/v1/admin/system/tradestats',
            //toolbar: '#toolbarDemo',
            defaultToolbar: ['filter', 'exports', 'print', {
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],
            cols: [[
                {field: 'symbol', title: '交易对'},
                {field: 'today_trade_qty', title: '今日成交量', sort:true},
                {field: 'today_trade_amount', title: '今日成交金额', templet: function(d){
                    return d.today_trade_amount +" "+ d.base.toUpperCase();
                }}
            ]],
            limits: [10, 15, 20, 25, 50, 100],
            limit: 15,
            page: false,
            skin: 'line'
        });

    });
</script>


{% include "iframe_footer" %}